<div class="fangdai">
    <div class="title">
        <h3>房贷<span>计算</span></h3>
        <div class="desc">选择基本情况，帮您快速计算房贷</div>
    </div>
    <div class="con">
        <div class="left">
            <div class="cal_form">
                <div class="cal_li">
                    <div class="cal_leftname">贷款类型</div>
                    <div class="cal_rightselect">
                        <i-select size="large" v-model="dk_type" @on-change="handleChangeType">
                            <i-option value="1">商业贷款</i-option>
                            <i-option value="2">公积金贷款</i-option>
                            <i-option value="3">组合贷款</i-option>
                        </i-select>
                    </div>
                </div>
                <div class="cal_li gjj_hook" v-show="dk_type === '2' || dk_type === '3'">
                    <div class="cal_leftname dkname">公积金贷款金额</div>
                    <div class="cal_rightselect">
                        <i-input size="large" placeholder="填写数字" @on-change="handleChangeValue" v-model="gjj_value">
                            <span slot="append">万元</span>
                        </i-input>
                    </div>
                </div>
                <div class="cal_li border_bottom gjj_hook" v-show="dk_type === '2' || dk_type === '3'">
                    <div class="cal_leftname">贷款年限</div>
                    <div class="cal_rightselect">
                        <i-select size="large" v-model="gjj_year">
                            <i-option value="1">1年(12期)</i-option>
                            <i-option value="2">2年(24期)</i-option>
                            <i-option value="3">3年(36期)</i-option>
                            <i-option value="4">4年(48期)</i-option>
                            <i-option value="5">5年(60期)</i-option>
                            <i-option value="6">6年(72期)</i-option>
                            <i-option value="7">7年(84期)</i-option>
                            <i-option value="8">8年(96期)</i-option>
                            <i-option value="9">9年(108期)</i-option>
                            <i-option value="10">10年(120期)</i-option>
                            <i-option value="11">11年(132期)</i-option>
                            <i-option value="12">12年(144期)</i-option>
                            <i-option value="13">13年(156期)</i-option>
                            <i-option value="14">14年(168期)</i-option>
                            <i-option value="15">15年(180期)</i-option>
                            <i-option value="16">16年(192期)</i-option>
                            <i-option value="17">17年(204期)</i-option>
                            <i-option value="18">18年(216期)</i-option>
                            <i-option value="19">19年(228期)</i-option>
                            <i-option value="20">20年(240期)</i-option>
                            <i-option value="21">21年(252期)</i-option>
                            <i-option value="22">22年(264期)</i-option>
                            <i-option value="23">23年(276期)</i-option>
                            <i-option value="24">24年(288期)</i-option>
                            <i-option value="25">25年(300期)</i-option>
                            <i-option value="26">26年(312期)</i-option>
                            <i-option value="27">27年(324期)</i-option>
                            <i-option value="28">28年(336期)</i-option>
                            <i-option value="29">29年(348期)</i-option>
                            <i-option value="30" selected="selected">30年(360期)</i-option>
                        </i-select>
                    </div>
                </div>
                <div class="cal_li" v-show="dk_type === '2' || dk_type === '3'">
                    <div class="cal_leftname">公积金利率</div>
                    <div class="cal_rightselect">
                        <i-select size="large" v-model="gjj_lilv">
                            <i-option value="0.0325">基准利率(3.25%)</i-option>
                            <i-option value="0.0358">1.1倍利率</i-option>
                            <i-option value="0.0374">1.15倍利率</i-option>
                            <i-option value="0.0390">1.2倍利率</i-option>
                            <i-option value="0.0423">1.3倍利率</i-option>
                            <i-option value="0.0293">9折利率</i-option>
                            <i-option value="0.0276">85折利率</i-option>
                            <i-option value="0.0260">8折利率</i-option>
                            <i-option value="0.0227">7折利率</i-option>
                        </i-select>
                    </div>
                </div>
                <hr v-if="dk_type === '3'" style="color:#ccc;margin-bottom:15px;" />
                <div class="cal_li" v-show="dk_type === '1' || dk_type === '3'">
                    <div class="cal_leftname dkname">商业贷款金额</div>
                    <div class="cal_rightselect">
                        <i-input size="large" placeholder="填写数字" @on-change="handleChangeValue" v-model="sd_value">
                            <span slot="append">万元</span>
                        </i-input>
                    </div>
                </div>
                <div class="cal_li border_bottom shangdai_hook" v-show="dk_type === '1' || dk_type === '3'">
                    <div class="cal_leftname">贷款年限</div>
                    <div class="cal_rightselect">
                        <i-select size="large" v-model="sd_year">
                            <i-option value="1">1年(12期)</i-option>
                            <i-option value="2">2年(24期)</i-option>
                            <i-option value="3">3年(36期)</i-option>
                            <i-option value="4">4年(48期)</i-option>
                            <i-option value="5">5年(60期)</i-option>
                            <i-option value="6">6年(72期)</i-option>
                            <i-option value="7">7年(84期)</i-option>
                            <i-option value="8">8年(96期)</i-option>
                            <i-option value="9">9年(108期)</i-option>
                            <i-option value="10">10年(120期)</i-option>
                            <i-option value="11">11年(132期)</i-option>
                            <i-option value="12">12年(144期)</i-option>
                            <i-option value="13">13年(156期)</i-option>
                            <i-option value="14">14年(168期)</i-option>
                            <i-option value="15">15年(180期)</i-option>
                            <i-option value="16">16年(192期)</i-option>
                            <i-option value="17">17年(204期)</i-option>
                            <i-option value="18">18年(216期)</i-option>
                            <i-option value="19">19年(228期)</i-option>
                            <i-option value="20">20年(240期)</i-option>
                            <i-option value="21">21年(252期)</i-option>
                            <i-option value="22">22年(264期)</i-option>
                            <i-option value="23">23年(276期)</i-option>
                            <i-option value="24">24年(288期)</i-option>
                            <i-option value="25">25年(300期)</i-option>
                            <i-option value="26">26年(312期)</i-option>
                            <i-option value="27">27年(324期)</i-option>
                            <i-option value="28">28年(336期)</i-option>
                            <i-option value="29">29年(348期)</i-option>
                            <i-option value="30" selected="selected">30年(360期)</i-option>
                        </i-select>
                    </div>
                </div>
                <div class="cal_li shangdai_hook" v-show="dk_type === '1' || dk_type === '3'">
                    <div class="cal_leftname">商贷利率</div>
                    <div class="cal_rightselect">
                        <i-select size="large" v-model="sd_lilv">
                            <i-option value="0.049" selected="selected">基准利率(4.9%)</i-option>
                            <i-option value="0.0539">1.1倍利率</i-option>
                            <i-option value="0.0563">1.15倍利率</i-option>
                            <i-option value="0.0588">1.2倍利率</i-option>
                            <i-option value="0.0637">1.3倍利率</i-option>
                            <i-option value="0.0441">9折利率</i-option>
                            <i-option value="0.0416">85折利率</i-option>
                            <i-option value="0.0392">8折利率</i-option>
                            <i-option value="0.0343">7折利率</i-option>
                        </i-select>
                    </div>
                </div>
            </div>

            <div class="tips">* 以上为央行公布的贷款基准利率，结果仅供参考</div>
        </div>
        <div class="middle">
            <div class="line"></div>
            <div class="btn">
                <i-button type="warning" :disabled="btnStatus" size="large" @click="calResult">开始计算</i-button>
            </div>
            <div class="line"></div>
        </div>
        <div class="right">
            <Tabs value="name1">
                <tab-pane label="等额本息" name="name1">
                    <div class="result">
                        <span class="tit">参考月供</span>
                        <span class="value">@{{ bx_data.yuegong }} 元</span>
                    </div>
                    <div class="result">
                        <span class="tit">支付利息</span>
                        <span class="value">@{{ bx_data.totalLixi }} 万元</span>
                    </div>
                    <div class="result">
                        <span class="tit">还款总额</span>
                        <span class="value">@{{ bx_data.totalPrice }} 万元</span>
                    </div>
                    <div class="hk_list">
                        <i-button type="primary" v-show="showDetailBtn" @click="showList(1)">等额本息还款详情</i-button>
                    </div>
                </tab-pane>
                <tab-pane label="等额本金" name="name2">
                    <div class="result">
                        <span class="tit">参考月供(元)</span>
                        <span class="value">@{{ bj_data.yuegong }} 元</span>
                    </div>
                    <div class="result">
                        <span class="tit">每月递减(元)</span>
                        <span class="value">@{{ bj_data.yuegongdijian }} 元</span>
                    </div>
                    <div class="result">
                        <span class="tit">支付利息(元)</span>
                        <span class="value">@{{ bj_data.totalLixi }} 万元</span>
                    </div>
                    <div class="result">
                        <span class="tit">还款总额(元)</span>
                        <span class="value">@{{ bj_data.totalPrice }} 万元</span>
                    </div>
                    <div class="hk_list">
                        <i-button type="success" v-show="showDetailBtn" @click="showList(2)">等额本金还款详情</i-button>
                    </div>
                </tab-pane>
            </Tabs>
        </div>
    </div>
</div>
<Drawer title="还款详情" width="600" v-model="showStatus" class="wrap-right">
    <Tabs :value="activeName">
        <tab-pane label="等额本息" name="name1">
            <div class="title">
                <div class="con">
                    <span class="txt">还款总额(万)</span>
                    <span class="price">@{{ bx_data.totalPrice }}</span>
                </div>
                <div class="con">
                    <span class="txt">总利息(万)</span>
                    <span class="price">@{{ bx_data.totalLixi }}</span>
                </div>
                <div class="con">
                    <span class="txt">贷款总额(万)</span>
                    <span class="price">@{{ bx_data.totalDknum }}</span>
                </div>
                <div class="con">
                    <span class="txt">贷款期限(年)</span>
                    <span class="price">@{{ bx_data.year }}</span>
                </div>
            </div>
            <div class="thead">
                <div class="txt">还款次数</div>
                <div class="txt">期次</div>
                <div class="txt">每月本金(元)</div>
                <div class="txt">每月利息(元)</div>
                <div class="txt">剩余还款(元)</div>
            </div>
            <template v-for="(item,index) in bx_data.mouthdataArray" :key="index">
                <div class="thead">
                    <div class="txt">@{{ index + 1 }}</div>
                    <div class="txt">@{{ item.monthName }}</div>
                    <div class="txt">@{{ item.yuebenjin.toFixed(2) }}</div>
                    <div class="txt">@{{ item.yuelixi.toFixed(2) }}</div>
                    <div class="txt">@{{ item.leftFund.toFixed(2) }}</div>
                </div>
                <div class="tip" v-if="item.monthName === '12月'"></div>
            </template>
        </tab-pane>
        <tab-pane label="等额本金" name="name2">
            <div class="title">
                <div class="con">
                    <span class="txt">还款总额(万)</span>
                    <span class="price">@{{ bj_data.totalPrice }}</span>
                </div>
                <div class="con">
                    <span class="txt">总利息(万)</span>
                    <span class="price">@{{ bj_data.totalLixi }}</span>
                </div>
                <div class="con">
                    <span class="txt">贷款总额(万)</span>
                    <span class="price">@{{ bj_data.totalDknum }}</span>
                </div>
                <div class="con">
                    <span class="txt">贷款期限(年)</span>
                    <span class="price">@{{ bj_data.year }}</span>
                </div>
            </div>
            <div class="thead">
                <div class="txt">还款次数</div>
                <div class="txt">期次</div>
                <div class="txt">每月本金(元)</div>
                <div class="txt">每月利息(元)</div>
                <div class="txt">剩余还款(元)</div>
            </div>
            <template v-for="(item,index) in bj_data.mouthdataArray" :key="index">
                <div class="thead">
                    <div class="txt">@{{ index + 1 }}</div>
                    <div class="txt">@{{ item.monthName }}</div>
                    <div class="txt">@{{ item.yuebenjin.toFixed(2) }}</div>
                    <div class="txt">@{{ item.yuelixi.toFixed(2) }}</div>
                    <div class="txt">@{{ item.leftFund.toFixed(2) }}</div>
                </div>
                <div class="tip" v-if="item.monthName === '12月'"></div>
            </template>
        </tab-pane>
    </Tabs>
</Drawer>